<template>
	<view >
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view @click="goDetail" class="demo-warter" v-for="(item, index) in leftList" :key="index">
					
					<u-lazy-load effect="linear"  :duration="0" :image="item.image" :index="index"></u-lazy-load>
					
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view @click="goDetail" class="demo-warter1" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load effect="linear"  :duration="0"  :image="item.image" :index="index"></u-lazy-load>
					
				</view>
			</template>
		</u-waterfall>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				list: [
					{
					
						image: '@/static/icon/5.png',
					},
					{
					
						image: '@/static/icon/7.png',
					},
					{
					
						image: '@/static/icon/6.png',
					},
					{
					
						image: '@/static/icon/5.png',
					},
					{
					
						image: '@/static/icon/7.png',
					},
					{
					
						image: '@/static/icon/6.png',
					},{
					
						image: '@/static/icon/5.png',
					},
					{
					
						image: '@/static/icon/7.png',
					},
					{
					
						image: '@/static/icon/6.png',
					},
				]
			}
		},
		onReady() {
			this.addRandomData();
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1000)
		},
		methods: {
			goDetail(){
				uni.navigateTo({
					url:"/pages/sys/cate_bags/detail"
				})
			},
			addRandomData() {
				for(let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.demo-warter {
		border-radius: 8px;
		overflow: hidden;
	
		margin: 24rpx 24rpx 0 0;
	}
	.demo-warter1 {
		border-radius: 8px;
		overflow: hidden;
		margin: 24rpx 0 0  0;
	}
	
	
</style>